<template>
  <div>
    <el-steps :active="1" class="">
      <el-step title="服务商注册信息"/>
      <el-step title="服务商信息填写"/>
      <el-step title="服务商资质认证"/>
      <el-step title="提交平台审核"/>
    </el-steps>
    <el-form ref="serviceInfo" :model="serviceInfo" :rules="rules" style="padding: 0 140px;" label-width="150px">
      <h4 class="title" >服务信息</h4>
      <el-form-item label="服务类型 :" style="position: relative" prop="service_types">
        <div class="limit">(最多选5项)</div>
        <el-checkbox-group
          v-model="serviceInfo.service_types"
          :min="1"
          :max="5"
        >
          <el-checkbox label="1" name="type">中国企业资信调查</el-checkbox>
          <el-checkbox label="2" name="type">海外企业资信调查</el-checkbox>
          <el-checkbox label="3" name="type">网站建设</el-checkbox>
          <el-checkbox label="4" name="type">网站数字推广</el-checkbox>
          <el-checkbox label="5" name="type">企业资质认证</el-checkbox>
          <el-checkbox label="6" name="type">实验室检测</el-checkbox>
          <el-checkbox label="7" name="type">物流</el-checkbox>
          <el-checkbox label="8" name="type">货代</el-checkbox>
          <el-checkbox label="9" name="type">海外展览</el-checkbox>
          <el-checkbox label="10" name="type">海外仓</el-checkbox>
          <el-checkbox label="11" name="type">外贸综合服务(关键汇税)</el-checkbox>
          <el-checkbox label="12" name="type">其他</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="主要服务对象 :" prop="service_object">
        <el-select v-model="serviceInfo.service_object" placeholder="请选择主要服务对象">
          <el-option :value="'1'" label="进口商"/>
          <el-option :value="'2'" label="出口商"/>
          <el-option :value="'3'" label="其他"/>
        </el-select>
      </el-form-item>
      <el-form-item label="主要服务区域 :" prop="service_region">
        <el-radio-group v-model="serviceInfo.service_region">
          <el-radio :label="'1'">国内</el-radio>
          <el-radio :label="'2'">国外</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item style="height: 50px;">
        <transition name="el-zoom-in-left">
          <el-cascader
            v-show="serviceInfo.service_region === '1'"
            :options="province"
            :props="regionProps"
            placeholder="请选择服务区域"
            style="width:100%"
            @active-item-change="handleItemChange"
            @change="handleRegion"
          />
        </transition>
      </el-form-item>
      <h4 class="title">公司信息</h4>
      <p>请根据您选择的服务对象及服务区域，选择是否需要填写公司名称(英文)、公司地址(英文)等。</p>
      <el-form-item label="公司名称 :" prop="company_name">
        <el-input v-model="serviceInfo.company_name" placeholder="请输入公司名称"/>
      </el-form-item>
      <el-form-item label="公司简称 :">
        <el-input v-model="serviceInfo.abbreviation" placeholder="请输入公司简称"/>
      </el-form-item>
      <el-form-item label="公司名称(英文) :">
        <el-input v-model="serviceInfo.company_name_us" placeholder="请输入公司名称（英文）"/>
      </el-form-item>
      <el-form-item label="公司注册地址 :">
        <el-cascader
          :options="province"
          :props="regionProps"
          placeholder="请选择公司注册地址省市"
          style="width:69.8%"
          @active-item-change="handleItemChange"
          @change="handleBusinessLocation"
        />
        <el-select
          v-model="serviceInfo.company_register_area_id"
          style="width:29.4%;"
          placeholder="请选择公司注册区"
          @change="handleRegisterArea"
          @visible-change="getRegisterArea">
          <el-option
            v-for="item in area"
            :key="item.district_id"
            :label="item.district_name"
            :value="item.district_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="business_license_location">
        <el-input v-model="serviceInfo.business_license_location" placeholder="请输入公司注册详细地址"/>
      </el-form-item>
      <el-form-item label="公司地址 :">
        <el-cascader
          :options="province"
          :props="regionProps"
          placeholder="请选择公司地址省市"
          style="width:69.8%"
          @active-item-change="handleItemChange"
          @change="handleCompanyAddress"
        />
        <el-select
          v-model="serviceInfo.company_area_id"
          style="width:29.4%;"
          placeholder="请选择公司地址区"
          @visible-change="getCompanyArea"
          @change="handleCompanyArea"
        >
          <el-option
            v-for="item in area"
            :key="item.district_id"
            :label="item.district_name"
            :value="item.district_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="company_address_detail">
        <el-input v-model="serviceInfo.company_address_detail" placeholder="请输入公司详细地址"/>
      </el-form-item>
      <el-form-item label="公司地址(英文) :">
        <el-input v-model="serviceInfo.company_address_detail_us" placeholder="请输入公司地址"/>
      </el-form-item>
      <el-form-item label="公司联系人 :" prop="company_contacts">
        <el-input v-model="serviceInfo.company_contacts" placeholder="请输入公司联系人姓名"/>
      </el-form-item>
      <el-form-item label="公司联系人(英文) :">
        <el-input v-model="serviceInfo.company_contacts_us" placeholder="请输入公司联系人姓名(英文)"/>
      </el-form-item>
      <el-form-item label="客服电话 :" prop="customer_mobile">
        <el-input v-model="serviceInfo.customer_mobile" placeholder="请输入公司联系人电话"/>
      </el-form-item>
      <el-form-item label="公司法人代表 :" prop="legal_person">
        <el-input v-model="serviceInfo.legal_person" placeholder="请输入公司法人代表"/>
      </el-form-item>
      <el-form-item label="公司法人代表(英文) :" >
        <el-input v-model="serviceInfo.legal_person_us" placeholder="请输入公司法人代表(英文）"/>
      </el-form-item>
      <el-form-item label="公司介绍 :" prop="company_introduce_en">
        <el-input
          v-model="serviceInfo.company_introduce_en"
          :autosize="{minRows: 8}"
          type="textarea"
          placeholder="请输入公司介绍"/>
      </el-form-item>
      <el-form-item label="公司介绍(英文) :">
        <el-input
          v-model="serviceInfo.company_introduce_us"
          :validate-event="true"
          :autosize="{minRows: 8}"
          type="textarea"
          placeholder="请输入公司介绍（英文）"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('serviceInfo')">下一步</el-button>
        <el-button @click="storageInfo">暂存信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getServiceInfoPc, saveServiceInfo } from '@/api/serviceinfo'
import { getAllProvince, getAllCity, getAllArea } from '@/api/district'

export default {
  data() {
    // const validateEnglish = (rule, value, callback) => {
    //   const reg = /^\w+$/
    //   if (reg.test(value)) {
    //     callback()
    //   } else {
    //     return callback(new Error('只能输入英文或数字'))
    //   }
    // }
    return {
      loading: false,
      serviceInfo:
          {
            service_types: [],
            service_object: '',
            service_region: '',
            service_province_id: '',
            service_city_id: '',
            company_name: '',
            customer_mobile: '',
            abbreviation: '',
            company_name_us: '',
            company_register_province_id: ' ',
            company_register_city_id: '',
            company_register_area_id: '',
            business_license_location: '',
            contacts_phone: '',
            legal_person: '',
            company_contacts: '',
            company_contacts_us: '',
            company_phone: '',
            company_province_id: '',
            company_city_id: '',
            company_area_id: '',
            company_address_detail: '',
            company_address_detail_us: '',
            company_introduce_en: '',
            company_introduce_us: ''
          },
      rules: {
        service_types: [
          { type: 'array', required: true, message: '请选择1-5个服务类型', trigger: 'change' }
        ],
        service_object: [
          { required: true, message: '请选择服务对象', trigger: 'blur' }
        ],
        service_region: [
          { required: true, message: '请选择服务区域', trigger: 'change' }
        ],
        company_name: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        business_license_location: [
          { required: true, message: '请输入公司注册地址', trigger: 'change' }
        ],
        company_address_detail: [
          { required: true, message: '请输入公司地址', trigger: 'change' }
        ],
        company_contacts: [
          { required: true, message: '请输入公司联系人', trigger: 'blur' }
        ],
        customer_mobile: [
          { type: 'number', required: true, message: '请输入正确电话', trigger: 'blur' }
        ],
        legal_person: [
          { required: true, message: '请输入公司法人代表', trigger: 'blur' }
        ],
        company_introduce_en: [
          { required: true, message: '请输入公司介绍', trigger: 'blur' }
        ]
      },
      province: [],
      area: [],
      regionProps: {
        label: 'district_name',
        value: 'district_id',
        children: 'cities'
      }
    }
  },
  created() {
    this.fetchData()
    this.getProvince()
  },
  mounted() {
  },
  methods: {
    fetchData() {
      getServiceInfoPc().then(response => {
        if (response.status === 200) {
          this.serviceInfo = response.data
        }
      }).then(res => {
        if (this.serviceInfo.company_city_id) {
          this.getCompanyArea()
        }
        if (this.serviceInfo.company_register_city_id) {
          this.getRegisterArea()
        }
      })
    },
    storageInfo() {
      this.serviceInfo.service_info_status = 3
      saveServiceInfo(this.serviceInfo).then(response => {
        if (response.status === 200) {
          this.$message({
            message: '信息已保存',
            type: 'success'
          })
        } else {
          this.$message({
            message: '信息暂存失败',
            type: 'error'
          })
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.serviceInfo.service_info_status = 0
          saveServiceInfo(this.serviceInfo).then(response => {
            if (response.status === 200) {
              this.$message({
                message: '信息已保存',
                type: 'success'
              })
              this.$router.replace('third')
            } else {
              this.$message({
                message: '信息保存失败',
                type: 'error'
              })
            }
          })
        } else {
          this.$message({
            message: '请填写必要信息',
            type: 'warning'
          })
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getProvince() {
      getAllProvince().then(response => {
        if (response.status === 200) {
          this.province = response.data
        }
      })
    },
    getCompanyArea() {
      getAllArea(this.serviceInfo.company_city_id).then(res => {
        this.area = res.data
      })
    },
    handleCompanyArea(id) {
      this.serviceInfo.company_area_id = id
    },
    getRegisterArea() {
      getAllArea(this.serviceInfo.company_register_city_id).then(res => {
        this.area = res.data
      })
    },
    handleRegisterArea(id) {
      this.serviceInfo.company_register_area_id = id
    },
    handleItemChange(val) {
      const index = val[0] - 1
      if (this.province[index].cities.length === 0) {
        getAllCity(val[0]).then(response => {
          if (response.status === 200) {
            this.province[index].cities = response.data
          }
        })
      }
    },
    handleRegion(val) {
      this.serviceInfo.service_province_id = val[0]
      this.serviceInfo.service_city_id = val[1]
    },
    handleBusinessLocation(val) {
      this.serviceInfo.company_register_province_id = val[0]
      this.serviceInfo.company_register_city_id = val[1]
    },
    handleCompanyAddress(val) {
      this.serviceInfo.company_province_id = val[0]
      this.serviceInfo.company_city_id = val[1]
    }
  }
}
</script>
<style rel="stylesheet" lang="scss" scoped>
  .title {
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
  }
  .limit {
    position: absolute;
    top: 20px;
    left: -83px;
    font-size: 12px;
  }

</style>
